<template>
	<!-- 页面内容 -->
	<view class="container">
		<!-- 顶部导航 -->
		<nav-bar class="nav-bar" isBack="true" :bgColor="isSticky?'#d5964d':''">
			<view slot="content">
				<text class="title">{{music.name}}</text>
			</view>
		</nav-bar>

		<!-- 引导歌词 -->
		<music-lyrics :lyrics="musicLyrics" :areaStyle="lyricsAreaStyle" :curTime="renderData('current_value')"
			@centerBtnClick="musicSeekTo">
		</music-lyrics>

		<!-- 音乐播放器 -->
		<zaudio theme="theme2"></zaudio>
	</view>
</template>

<script>
	import apiMusic from '@/common/api/music.js'
	export default {
		data() {
			return {
				music: {},
				musicLyrics: [], //当前音乐配词lrc
				lyricsAreaStyle: {
					width: '100vw',
					height: '66vh',
					background: '',
				}
			}
		},
		onShow() {
			//获取参数
			this.$zaudio.syncRender()
			this.loadMusic()
		},
		computed: {
			renderData() {
				return name => {
					if (!this.$zaudio.renderIsPlay) {
						if (name == 'paused') {
							return true;
						}
						return this.$zaudio.renderinfo[name];
					} else {
						if (name == 'paused') {
							return this.$zaudio.paused;
						}
						return this.$zaudio.playinfo[name];
					}
				};
			}
		},
		methods: {
			// 音频时间跳转
			musicSeekTo(e) {
				// console.log("跳跃播放到：", e.centerTime)
				if (this.$zaudio.renderIsPlay) {
					this.$zaudio.seek(e.centerTime);
				}
			},
			loadMusic() {
				let index = this.$zaudio.renderIndex
				let music = this.$zaudio.audiolist[index]
				console.log("music id: " + music.id)
				console.log()
				let _this = this
				apiMusic.audioDetails({
					id: music.id
				}).then(res => {
					_this.music = res;
					if (res.lyrics) {
						_this.musicLyrics = res.lyrics.split("\n")
					} else {
						_this.musicLyrics = []
					}
					console.log(_this.musicLyrics)
				}).catch(err => {
					console.error(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	// 前景图
	.background {
		width: 100vw;
		height: 100vh;
		position: fixed;
		opacity: 0.3;

		.cover {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #F9F9F9;
		}

		.mask {
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(101, 101, 101, 0.3);
		}
	}

	// 页面内容
	.container {
		width: 100%;
		position: relative;

	}
</style>
